<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2024/12/18
  Time: 11:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!--<!DOCTYPE html>-->
<!--<html lang="en">-->

<!--<head>-->

<!--    <meta charset="utf-8">-->
<!--    <meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<!--    <meta name="viewport" content="width=device-width,initial-scale=1">-->
<!--    <title>Edumin - Bootstrap Admin Dashboard </title>-->
<!--    &lt;!&ndash; Favicon icon &ndash;&gt;-->

<!--    <link rel="stylesheet" href="static/css/jqvmap.min.css">-->
<!--    <link rel="stylesheet" href="static/css/chartist.min.css">-->
<!--    &lt;!&ndash; Summernote &ndash;&gt;-->
<!--    <link href="static/css/summernote.css" rel="stylesheet">-->
<!--    <link rel="stylesheet" href="static/css/bootstrap-select.min.css">-->
<!--    <link rel="stylesheet" href="static/css/style.css">-->
<!--    <link rel="stylesheet" href="static/css/skin-3.css">-->

<!--&lt;!&ndash;    <link rel="canonical" href="https://www.17sucai.com/index.html" />&ndash;&gt;-->
<!--</head>-->

<!--<body>-->

<!--    &lt;!&ndash;*******************-->
<!--        Preloader start-->
<!--    ********************&ndash;&gt;-->
<!--    <div id="preloader">-->
<!--        <div class="sk-three-bounce">-->
<!--            <div class="sk-child sk-bounce1"></div>-->
<!--            <div class="sk-child sk-bounce2"></div>-->
<!--            <div class="sk-child sk-bounce3"></div>-->
<!--        </div>-->
<!--    </div>-->
<!--    &lt;!&ndash;*******************-->
<!--        Preloader end-->
<!--    ********************&ndash;&gt;-->

<!--    &lt;!&ndash;**********************************-->
<!--        Main wrapper start-->
<!--    ***********************************&ndash;&gt;-->
<!--    <div id="main-wrapper">-->

<!--        &lt;!&ndash;**********************************-->
<!--            Nav header start-->
<!--        ***********************************&ndash;&gt;-->
<!--        <div class="nav-header">-->
<!--            <a href="" class="brand-logo">-->
<!--                <img class="logo-abbr" src="static/picture/logo-white-3.png" alt="">-->
<!--                <img class="logo-compact" src="static/picture/logo-text-white.png" alt="">-->
<!--                <img class="brand-title" src="static/picture/logo-text-white.png" alt="">-->
<!--            </a>-->

<!--            <div class="nav-control">-->
<!--                <div class="hamburger">-->
<!--                    <span class="line"></span><span class="line"></span><span class="line"></span>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        &lt;!&ndash;**********************************-->
<!--            Nav header end-->
<!--        ***********************************&ndash;&gt;-->

<!--        &lt;!&ndash;**********************************-->
<!--            Header start-->
<!--        ***********************************&ndash;&gt;-->
<!--        <div class="header">-->
<!--            <div class="header-content">-->
<!--                <nav class="navbar navbar-expand">-->
<!--                    <div class="collapse navbar-collapse justify-content-between">-->
<!--                        <div class="header-left">-->
<!--                            <div class="search_bar dropdown">-->
<!--                                <span class="search_icon p-3 c-pointer" data-toggle="dropdown">-->
<!--                                    <i class="mdi mdi-magnify"></i>-->
<!--                                </span>-->
<!--                                <div class="dropdown-menu p-0 m-0">-->
<!--                                    <form>-->
<!--                                        <input class="form-control" type="search" placeholder="Search" aria-label="Search">-->
<!--                                    </form>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->

<!--                        <ul class="navbar-nav header-right">-->
<!--                            <li class="nav-item dropdown notification_dropdown">-->
<!--                                <a class="nav-link bell ai-icon" href="#" role="button" data-toggle="dropdown">-->
<!--                                    <svg id="icon-user" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell">-->
<!--										<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>-->
<!--										<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>-->
<!--									</svg>-->
<!--                                    <div class="pulse-css"></div>-->
<!--                                </a>-->
<!--                                <div class="dropdown-menu dropdown-menu-right">-->
<!--                                    <ul class="list-unstyled">-->
<!--                                        <li class="media dropdown-item">-->
<!--                                            <span class="success"><i class="ti-user"></i></span>-->
<!--                                            <div class="media-body">-->
<!--                                                <a href="#">-->
<!--                                                    <p><strong>Martin</strong> has added a <strong>customer</strong> Successfully-->
<!--                                                    </p>-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                            <span class="notify-time">3:20 am</span>-->
<!--                                        </li>-->
<!--                                        <li class="media dropdown-item">-->
<!--                                            <span class="primary"><i class="ti-shopping-cart"></i></span>-->
<!--                                            <div class="media-body">-->
<!--                                                <a href="#">-->
<!--                                                    <p><strong>Jennifer</strong> purchased Light Dashboard 2.0.</p>-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                            <span class="notify-time">3:20 am</span>-->
<!--                                        </li>-->
<!--                                        <li class="media dropdown-item">-->
<!--                                            <span class="danger"><i class="ti-bookmark"></i></span>-->
<!--                                            <div class="media-body">-->
<!--                                                <a href="#">-->
<!--                                                    <p><strong>Robin</strong> marked a <strong>ticket</strong> as unsolved.-->
<!--                                                    </p>-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                            <span class="notify-time">3:20 am</span>-->
<!--                                        </li>-->
<!--                                        <li class="media dropdown-item">-->
<!--                                            <span class="primary"><i class="ti-heart"></i></span>-->
<!--                                            <div class="media-body">-->
<!--                                                <a href="#">-->
<!--                                                    <p><strong>David</strong> purchased Light Dashboard 1.0.</p>-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                            <span class="notify-time">3:20 am</span>-->
<!--                                        </li>-->
<!--                                        <li class="media dropdown-item">-->
<!--                                            <span class="success"><i class="ti-image"></i></span>-->
<!--                                            <div class="media-body">-->
<!--                                                <a href="#">-->
<!--                                                    <p><strong> James.</strong> has added a<strong>customer</strong> Successfully-->
<!--                                                    </p>-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                            <span class="notify-time">3:20 am</span>-->
<!--                                        </li>-->
<!--                                    </ul>-->
<!--                                    <a class="all-notification" href="#">See all notifications <i class="ti-arrow-right"></i></a>-->
<!--                                </div>-->
<!--                            </li>-->
<!--                            <li class="nav-item dropdown header-profile">-->
<!--                                <a class="nav-link" href="#" role="button" data-toggle="dropdown">-->
<!--                                    <img src="static/picture/pic1.jpg" width="20" alt="">-->
<!--                                </a>-->
<!--                                <div class="dropdown-menu dropdown-menu-right">-->
<!--                                    <a href="app-profile.html" class="dropdown-item ai-icon">-->
<!--                                        <svg id="icon-user1" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>-->
<!--                                        <span class="ml-2">Profile </span>-->
<!--                                    </a>-->
<!--                                    <a href="email-inbox.html" class="dropdown-item ai-icon">-->
<!--                                        <svg id="icon-inbox" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>-->
<!--                                        <span class="ml-2">Inbox </span>-->
<!--                                    </a>-->
<!--                                    <a href="page-login.html" class="dropdown-item ai-icon">-->
<!--                                        <svg id="icon-logout" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>-->
<!--                                        <span class="ml-2">Logout </span>-->
<!--                                    </a>-->
<!--                                </div>-->
<!--                            </li>-->
<!--                        </ul>-->
<!--                    </div>-->
<!--                </nav>-->
<!--            </div>-->
<!--        </div>-->
<!--        &lt;!&ndash;**********************************-->
<!--            Header end ti-comment-alt-->
<!--        ***********************************&ndash;&gt;-->

<!--        &lt;!&ndash;**********************************-->
<!--            Sidebar start-->
<!--        ***********************************&ndash;&gt;-->
<!--        <div class="dlabnav">-->
<!--            <div class="dlabnav-scroll">-->
<!--                <ul class="metismenu" id="menu">-->
<!--                    <li class="nav-label first">Main Menu</li>-->
<!--                    <li><a class="has-arrow" href="javascript:void()" aria-expanded="false">-->
<!--							<i class="la la-home"></i>-->
<!--							<span class="nav-text">Dashboard</span>-->
<!--						</a>-->
<!--                        <ul aria-expanded="false">-->
<!--                            <li><a href="">Dashboard 1</a></li>-->
<!--                            <li><a href="index-2.html">Dashboard 2</a></li>-->
<!--                            <li><a href="index-3.html">Dashboard 3</a></li>-->
<!--                        </ul>-->
<!--                    </li>-->
<!--                    <li><a class="ai-icon" href="event-management.html" aria-expanded="false">-->
<!--							<i class="la la-calendar"></i>-->
<!--							<span class="nav-text">Event Management</span>-->
<!--						</a>-->
<!--                    </li>-->
<!--                    <li><a class="has-arrow" href="javascript:void()" aria-expanded="false">-->
<!--							<i class="la la-user"></i>-->
<!--							<span class="nav-text">Professors</span>-->
<!--						</a>-->
<!--                        <ul aria-expanded="false">-->
<!--                            <li><a href="all-professors.html">All Professor</a></li>-->
<!--                            <li><a href="add-professor.html">Add Professor</a></li>-->
<!--                            <li><a href="edit-professor.html">Edit Professor</a></li>-->
<!--                            <li><a href="professor-profile.html">Professor Profile</a></li>-->
<!--                        </ul>-->
<!--                    </li>-->
<!--                    <li><a class="has-arrow" href="javascript:void()" aria-expanded="false">-->
<!--							<i class="la la-users"></i>-->
<!--							<span class="nav-text">Students</span>-->
<!--						</a>-->
<!--                        <ul aria-expanded="false">-->
<!--                            <li><a href="all-students.html">All Students</a></li>-->
<!--                            <li><a href="add-student.html">Add Students</a></li>-->
<!--                            <li><a href="edit-student.html">Edit Students</a></li>-->
<!--                            <li><a href="about-student.html">About Students</a></li>-->
<!--                        </ul>-->
<!--                    </li>-->
<!--                    <li><a class="has-arrow" href="javascript:void()" aria-expanded="false">-->
<!--							<i class="la la-graduation-cap"></i>-->
<!--							<span class="nav-text">Courses</span>-->
<!--						</a>-->
<!--                        <ul aria-expanded="false">-->
<!--                            <li><a href="all-courses.html">All Courses</a></li>-->
<!--                            <li><a href="add-courses.html">Add Courses</a></li>-->
<!--                            <li><a href="edit-courses.html">Edit Courses</a></li>-->
<!--                            <li><a href="about-courses.html">About Courses</a></li>-->
<!--                        </ul>-->
<!--                    </li>-->
<!--                    <li><a class="has-arrow" href="javascript:void()" aria-expanded="false">-->
<!--							<i class="la la-book"></i>-->
<!--							<span class="nav-text">Library</span>-->
<!--						</a>-->
<!--                        <ul aria-expanded="false">-->
<!--                            <li><a href="all-library.html">All Library</a></li>-->
<!--                            <li><a href="add-library.html">Add Library</a></li>-->
<!--                            <li><a href="edit-library.html">Edit Library</a></li>-->
<!--                        </ul>-->
<!--                    </li>-->
<!--                    <li><a class="has-arrow" href="javascript:void()" aria-expanded="false">-->
<!--							<i class="la la-building"></i>-->
<!--							<span class="nav-text">Departments</span>-->
<!--						</a>-->
<!--                        <ul aria-expanded="false">-->
<!--                            <li><a href="all-departments.html">All Departments</a></li>-->
<!--                            <li><a href="add-departments.html">Add Departments</a></li>-->
<!--                            <li><a href="edit-departments.html">Edit Departments</a></li>-->
<!--                        </ul>-->
<!--                    </li>-->
<!--                    <li><a class="has-arrow" href="javascript:void()" aria-expanded="false">-->
<!--							<i class="la la-users"></i>-->
<!--							<span class="nav-text">Staff</span>-->
<!--						</a>-->
<!--                        <ul aria-expanded="false">-->
<!--                            <li><a href="all-staff.html">All Staff</a></li>-->
<!--                            <li><a href="add-staff.html">Add Staff</a></li>-->
<!--                            <li><a href="edit-staff.html">Edit Staff</a></li>-->
<!--                            <li><a href="staff-profile.html">Staff Profile</a></li>-->
<!--                        </ul>-->
<!--                    </li>-->
<!--                    <li><a class="has-arrow" href="javascript:void()" aria-expanded="false">-->
<!--							<i class="la la-gift"></i>-->
<!--							<span class="nav-text">Holiday</span>-->
<!--						</a>-->
<!--                        <ul aria-expanded="false">-->
<!--                            <li><a href="all-holiday.html">All Holiday</a></li>-->
<!--                            <li><a href="add-holiday.html">Add Holiday</a></li>-->
<!--                            <li><a href="edit-holiday.html">Edit Holiday</a></li>-->
<!--                            <li><a href="holiday-calendar.html">Holiday Calendar</a></li>-->
<!--                        </ul>-->
<!--                    </li>-->
<!--                    <li><a class="has-arrow" href="javascript:void()" aria-expanded="false">-->
<!--							<i class="la la-dollar"></i>-->
<!--							<span class="nav-text">Fees</span>-->
<!--						</a>-->
<!--                        <ul aria-expanded="false">-->
<!--                            <li><a href="fees-collection.html">Fees Collection</a></li>-->
<!--                            <li><a href="add-fees.html">Add Fees</a></li>-->
<!--                            <li><a href="fees-receipt.html">Fees Receipt</a></li>-->
<!--                        </ul>-->
<!--                    </li>-->
<!--                    <li class="nav-label">Apps</li>-->
<!--                    <li><a class="has-arrow" href="javascript:void()" aria-expanded="false">-->
<!--							<i class="la la-users"></i>-->
<!--							<span class="nav-text">Apps</span>-->
<!--						</a>-->
<!--                        <ul aria-expanded="false">-->
<!--                            <li><a href="app-profile.html">Profile</a></li>-->
<!--                            <li><a class="has-arrow" href="javascript:void()" aria-expanded="false">Email</a>-->
<!--                                <ul aria-expanded="false">-->
<!--                                    <li><a href="email-compose.html">Compose</a></li>-->
<!--                                    <li><a href="email-inbox.html">Inbox</a></li>-->
<!--                                    <li><a href="email-read.html">Read</a></li>-->
<!--                                </ul>-->
<!--                            </li>-->
<!--                            <li><a href="app-calender.html">Calendar</a></li>-->
<!--                            <li><a class="has-arrow" href="javascript:void()" aria-expanded="false">Shop</a>-->
<!--                                <ul aria-expanded="false">-->
<!--                                    <li><a href="ecom-product-grid.html">Product Grid</a></li>-->
<!--                                    <li><a href="ecom-product-list.html">Product List</a></li>-->
<!--                                    <li><a href="ecom-product-detail.html">Product Details</a></li>-->
<!--                                    <li><a href="ecom-product-order.html">Order</a></li>-->
<!--                                    <li><a href="ecom-checkout.html">Checkout</a></li>-->
<!--                                    <li><a href="ecom-invoice.html">Invoice</a></li>-->
<!--                                    <li><a href="ecom-customers.html">Customers</a></li>-->
<!--                                </ul>-->
<!--                            </li>-->
<!--                        </ul>-->
<!--                    </li>-->
<!--                    <li><a class="has-arrow ai-icon" href="javascript:void()" aria-expanded="false">-->
<!--							<i class="la la-signal"></i>-->
<!--							<span class="nav-text">Charts</span>-->
<!--						</a>-->
<!--                        <ul aria-expanded="false">-->
<!--                            <li><a href="chart-flot.html">Flot</a></li>-->
<!--                            <li><a href="chart-morris.html">Morris</a></li>-->
<!--                            <li><a href="chart-chartjs.html">Chartjs</a></li>-->
<!--                            <li><a href="chart-chartist.html">Chartist</a></li>-->
<!--                            <li><a href="chart-sparkline.html">Sparkline</a></li>-->
<!--                            <li><a href="chart-peity.html">Peity</a></li>-->
<!--                        </ul>-->
<!--                    </li>-->
<!--                    <li class="nav-label">Components</li>-->
<!--                    <li class="mega-menu mega-menu-xl"><a class="has-arrow ai-icon" href="javascript:void()" aria-expanded="false">-->
<!--							<i class="la la-globe"></i>-->
<!--							<span class="nav-text">Bootstrap</span>-->
<!--						</a>-->
<!--                        <ul aria-expanded="false">-->
<!--                            <li><a href="ui-accordion.html">Accordion</a></li>-->
<!--                            <li><a href="ui-alert.html">Alert</a></li>-->
<!--                            <li><a href="ui-badge.html">Badge</a></li>-->
<!--                            <li><a href="ui-button.html">Button</a></li>-->
<!--                            <li><a href="ui-modal.html">Modal</a></li>-->
<!--                            <li><a href="ui-button-group.html">Button Group</a></li>-->
<!--                            <li><a href="ui-list-group.html">List Group</a></li>-->
<!--                            <li><a href="ui-media-object.html">Media Object</a></li>-->
<!--                            <li><a href="ui-card.html">Cards</a></li>-->
<!--                            <li><a href="ui-carousel.html">Carousel</a></li>-->
<!--                            <li><a href="ui-dropdown.html">Dropdown</a></li>-->
<!--                            <li><a href="ui-popover.html">Popover</a></li>-->
<!--                            <li><a href="ui-progressbar.html">Progressbar</a></li>-->
<!--                            <li><a href="ui-tab.html">Tab</a></li>-->
<!--                            <li><a href="ui-typography.html">Typography</a></li>-->
<!--                            <li><a href="ui-pagination.html">Pagination</a></li>-->
<!--                            <li><a href="ui-grid.html">Grid</a></li>-->
<!--                        </ul>-->
<!--                    </li>-->
<!--                    <li><a class="has-arrow" href="javascript:void()" aria-expanded="false">-->
<!--							<i class="la la-plus-square-o"></i>-->
<!--							<span class="nav-text">Plugins</span>-->
<!--						</a>-->
<!--                        <ul aria-expanded="false">-->
<!--                            <li><a href="uc-select2.html">Select 2</a></li>-->
<!--                            <li><a href="uc-nestable.html">Nestedable</a></li>-->
<!--                            <li><a href="uc-noui-slider.html">Noui Slider</a></li>-->
<!--                            <li><a href="uc-sweetalert.html">Sweet Alert</a></li>-->
<!--                            <li><a href="uc-toastr.html">Toastr</a></li>-->
<!--                            <li><a href="map-jqvmap.html">Jqv Map</a></li>-->
<!--                        </ul>-->
<!--                    </li>-->
<!--                    <li><a href="widget-basic.html" aria-expanded="false">-->
<!--							<i class="la la-desktop"></i>-->
<!--							<span class="nav-text">Widget</span>-->
<!--						</a></li>-->
<!--                    <li class="nav-label">Forms</li>-->
<!--                    <li><a class="has-arrow" href="javascript:void()" aria-expanded="false">-->
<!--							<i class="la la-file-text"></i>-->
<!--							<span class="nav-text">Forms</span>-->
<!--						</a>-->
<!--                        <ul aria-expanded="false">-->
<!--                            <li><a href="form-element.html">Form Elements</a></li>-->
<!--                            <li><a href="form-wizard.html">Wizard</a></li>-->
<!--                            <li><a href="form-editor-summernote.html">Summernote</a></li>-->
<!--                            <li><a href="form-pickers.html">Pickers</a></li>-->
<!--                            <li><a href="form-validation-jquery.html">Jquery Validate</a></li>-->
<!--                        </ul>-->
<!--                    </li>-->
<!--                    <li class="nav-label">Table</li>-->
<!--                    <li><a class="has-arrow" href="javascript:void()" aria-expanded="false">-->
<!--							<i class="la la-table"></i>-->
<!--							<span class="nav-text">Table</span>-->
<!--						</a>-->
<!--                        <ul aria-expanded="false">-->
<!--                            <li><a href="table-bootstrap-basic.html">Bootstrap</a></li>-->
<!--                            <li><a href="table-datatable-basic.html">Datatable</a></li>-->
<!--                        </ul>-->
<!--                    </li>-->
<!--                    <li class="nav-label">Extra</li>-->
<!--                    <li><a class="has-arrow" href="javascript:void()" aria-expanded="false">-->
<!--							<i class="la la-th-list"></i>-->
<!--							<span class="nav-text">Pages</span>-->
<!--						</a>-->
<!--                        <ul aria-expanded="false">-->
<!--                            <li><a href="page-register.html">Register</a></li>-->
<!--                            <li><a href="page-login.html">Login</a></li>-->
<!--                            <li><a class="has-arrow" href="javascript:void()" aria-expanded="false">Error</a>-->
<!--                                <ul aria-expanded="false">-->
<!--                                    <li><a href="page-error-400.html">Error 400</a></li>-->
<!--                                    <li><a href="page-error-403.html">Error 403</a></li>-->
<!--                                    <li><a href="page-error-404.html">Error 404</a></li>-->
<!--                                    <li><a href="page-error-500.html">Error 500</a></li>-->
<!--                                    <li><a href="page-error-503.html">Error 503</a></li>-->
<!--                                </ul>-->
<!--                            </li>-->
<!--                            <li><a href="page-lock-screen.html">Lock Screen</a></li>-->
<!--                        </ul>-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </div>-->
<!--        </div>-->
<!--        &lt;!&ndash;**********************************-->
<!--            Sidebar end-->
<!--        ***********************************&ndash;&gt;-->

<!--        &lt;!&ndash;**********************************-->
<!--            Content body start-->
<!--        ***********************************&ndash;&gt;-->
<!--        <div class="content-body">-->
<!--            &lt;!&ndash; row &ndash;&gt;-->
<!--            <div class="container-fluid">-->

<!--                <div class="row">-->
<!--                    <div class="col-xl-3 col-xxl-3 col-sm-6">-->
<!--                        <div class="widget-stat card bg-primary">-->
<!--                            <div class="card-body">-->
<!--                                <div class="media">-->
<!--                                    <span class="mr-3">-->
<!--										<i class="la la-users"></i>-->
<!--									</span>-->
<!--                                    <div class="media-body text-white">-->
<!--                                        <p class="mb-1">Total Students</p>-->
<!--                                        <h3 class="text-white">3280</h3>-->
<!--                                        <div class="progress mb-2 bg-white">-->
<!--                                            <div class="progress-bar progress-animated bg-light" style="width: 80%"></div>-->
<!--                                        </div>-->
<!--                                        <small>80% Increase in 20 Days</small>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="col-xl-3 col-xxl-3 col-sm-6">-->
<!--                        <div class="widget-stat card bg-warning">-->
<!--                            <div class="card-body">-->
<!--                                <div class="media">-->
<!--                                    <span class="mr-3">-->
<!--										<i class="la la-user"></i>-->
<!--									</span>-->
<!--                                    <div class="media-body text-white">-->
<!--                                        <p class="mb-1">New Students</p>-->
<!--                                        <h3 class="text-white">245</h3>-->
<!--                                        <div class="progress mb-2 bg-white">-->
<!--                                            <div class="progress-bar progress-animated bg-light" style="width: 50%"></div>-->
<!--                                        </div>-->
<!--                                        <small>50% Increase in 25 Days</small>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="col-xl-3 col-xxl-3 col-sm-6">-->
<!--                        <div class="widget-stat card bg-secondary">-->
<!--                            <div class="card-body">-->
<!--                                <div class="media">-->
<!--                                    <span class="mr-3">-->
<!--										<i class="la la-graduation-cap"></i>-->
<!--									</span>-->
<!--                                    <div class="media-body text-white">-->
<!--                                        <p class="mb-1">Total Course</p>-->
<!--                                        <h3 class="text-white">28</h3>-->
<!--                                        <div class="progress mb-2 bg-white">-->
<!--                                            <div class="progress-bar progress-animated bg-light" style="width: 76%"></div>-->
<!--                                        </div>-->
<!--                                        <small>76% Increase in 20 Days</small>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="col-xl-3 col-xxl-3 col-sm-6">-->
<!--                        <div class="widget-stat card bg-danger">-->
<!--                            <div class="card-body">-->
<!--                                <div class="media">-->
<!--                                    <span class="mr-3">-->
<!--										<i class="la la-dollar"></i>-->
<!--									</span>-->
<!--                                    <div class="media-body text-white">-->
<!--                                        <p class="mb-1">Fees Collection</p>-->
<!--                                        <h3 class="text-white">25160$</h3>-->
<!--                                        <div class="progress mb-2 bg-white">-->
<!--                                            <div class="progress-bar progress-animated bg-light" style="width: 30%"></div>-->
<!--                                        </div>-->
<!--                                        <small>30% Increase in 30 Days</small>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="col-xl-6 col-xxl-6 col-lg-12 col-sm-12">-->
<!--                        <div class="card">-->
<!--                            <div class="card-header">-->
<!--                                <h3 class="card-title">University Survey</h3>-->
<!--                            </div>-->
<!--                            <div class="card-body">-->
<!--                                <div id="morris_bar_stalked" class="morris_chart_height" style="height: 300px !important;"></div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="col-xl-3 col-xxl-3 col-sm-6">-->
<!--                        <div class="card">-->
<!--                            <div class="card-header">-->
<!--                                <h3 class="card-title">Donught Chart</h3>-->
<!--                            </div>-->
<!--                            <div class="card-body">-->
<!--                                <div id="morris_donught_2" class="morris_chart_height" style="height: 300px !important;"></div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="col-xl-3 col-xxl-3 col-sm-6">-->
<!--                        <div class="card">-->
<!--                            <div class="card-header">-->
<!--                                <h3 class="card-title">University Survey</h3>-->
<!--                            </div>-->
<!--                            <div class="card-body">-->
<!--                                <div id="morris_area" class="morris_chart_height" style="height: 300px !important;"></div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="col-xl-3 col-xxl-4 col-lg-6 col-md-6">-->
<!--                        <div class="card">-->
<!--                            <img class="img-fluid" src="static/picture/pic11.jpg" alt="">-->
<!--                            <div class="card-body">-->
<!--                                <h4><a href="about-courses.html">Why is Early Education Essential?</a></h4>-->
<!--                                <ul class="list-group mb-3 list-group-flush">-->
<!--                                    <li class="list-group-item px-0 border-top-0 d-flex justify-content-between"><span class="mb-0 text-muted">April 23</span>-->
<!--                                        <a href="javascript:void(0);"><i class="la la-heart-o mr-1"></i><strong>230</strong></a></li>-->
<!--                                    <li class="list-group-item px-0 d-flex justify-content-between">-->
<!--                                        <span class="mb-0">Duration :</span><strong>12 Months</strong></li>-->
<!--                                    <li class="list-group-item px-0 d-flex justify-content-between">-->
<!--                                        <span class="mb-0">Professor :</span><strong>Jack Ronan</strong></li>-->
<!--                                    <li class="list-group-item px-0 d-flex justify-content-between">-->
<!--                                        <span><i class="fa fa-graduation-cap text-primary mr-2"></i>Student</span><strong>+120</strong></li>-->
<!--                                </ul>-->
<!--                                <a href="about-courses.html" class="btn btn-primary">Read More</a>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="col-xl-3 col-xxl-4 col-lg-6 col-md-6">-->
<!--                        <div class="card">-->
<!--                            <img class="img-fluid" src="static/picture/pic2.jpg" alt="">-->
<!--                            <div class="card-body">-->
<!--                                <h4><a href="about-courses.html">The Shocking Revelation of Education.</a></h4>-->
<!--                                <ul class="list-group mb-3 list-group-flush">-->
<!--                                    <li class="list-group-item px-0 border-top-0 d-flex justify-content-between"><span class="mb-0 text-muted">April 23</span>-->
<!--                                        <a href="javascript:void(0);"><i class="la la-heart-o mr-1"></i><strong>230</strong></a></li>-->
<!--                                    <li class="list-group-item px-0 d-flex justify-content-between">-->
<!--                                        <span class="mb-0">Duration :</span><strong>12 Months</strong></li>-->
<!--                                    <li class="list-group-item px-0 d-flex justify-content-between">-->
<!--                                        <span class="mb-0">Professor :</span><strong>Jimmy Morris</strong></li>-->
<!--                                    <li class="list-group-item px-0 d-flex justify-content-between">-->
<!--                                        <span><i class="fa fa-graduation-cap text-primary mr-2"></i>Student</span><strong>+120</strong></li>-->
<!--                                </ul>-->
<!--                                <a href="about-courses.html" class="btn btn-primary">Read More</a>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="col-xl-3 col-xxl-4 col-lg-6 col-md-6">-->
<!--                        <div class="card">-->
<!--                            <img class="img-fluid" src="static/picture/pic3.jpg" alt="">-->
<!--                            <div class="card-body">-->
<!--                                <h4><a href="about-courses.html">Five Things Nobody Told You About</a></h4>-->
<!--                                <ul class="list-group mb-3 list-group-flush">-->
<!--                                    <li class="list-group-item px-0 border-top-0 d-flex justify-content-between"><span class="mb-0 text-muted">April 23</span>-->
<!--                                        <a href="javascript:void(0);"><i class="la la-heart-o mr-1"></i><strong>230</strong></a></li>-->
<!--                                    <li class="list-group-item px-0 d-flex justify-content-between">-->
<!--                                        <span class="mb-0">Duration :</span><strong>12 Months</strong></li>-->
<!--                                    <li class="list-group-item px-0 d-flex justify-content-between">-->
<!--                                        <span class="mb-0">Professor :</span><strong>Konne Backfield</strong></li>-->
<!--                                    <li class="list-group-item px-0 d-flex justify-content-between">-->
<!--                                        <span><i class="fa fa-graduation-cap text-primary mr-2"></i>Student</span><strong>+120</strong></li>-->






<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Edumin - Bootstrap Admin Dashboard </title>
    <!-- Favicon icon -->

    <link rel="stylesheet" href="static/css/jqvmap.min.css">
    <link rel="stylesheet" href="static/css/chartist.min.css">
    <link rel="stylesheet" href="static/css/lunbotu.css">
    <!-- Summernote -->
    <link href="static/css/summernote.css" rel="stylesheet">
    <link rel="stylesheet" href="static/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="static/css/style.css">
    <link rel="stylesheet" href="static/css/skin-3.css">
    <!--    <link rel="stylesheet" href="static/css/background.css">-->
    <!--    <style>-->
    <!--        .main-content-container {-->
    <!--            padding: 20px; /* 根据需要调整内边距 */-->
    <!--            margin: 0 auto; /* 居中显示 */-->
    <!--            /* max-width: 1200px; /* 移除或设置为一个非常大的值 */-->
    <!--        }-->
    <!--        .container-fluid {-->
    <!--            padding-left: 20px; /* 确保左右内边距相等 */-->
    <!--            padding-right: 20px; /* 确保左右内边距相等 */-->
    <!--        }-->
    <!--    </style>-->
</head>

<body>

<!-- 导航栏 -->
<div class="navbar">
    <div class="logo" > <!-- 添加了id属性 -->
        <img src="static/picture/schoollogo.png" alt="Logo"> <!-- 替换为实际的logo图片路径 -->
    </div>
    <!--    <div class="nav-links">-->
    <!--        <a href="#">Home</a>-->
    <!--        <a href="#">About</a>-->
    <!--        <a href="#">Services</a>-->
    <!--        <a href="#">Contact</a>-->
    <!--    </div>-->
    <!--    <div class="search-section" onclick="toggleSearch()">-->
    <!--        <img src="search-icon.png" alt="Search Icon" style="width: 20px; height: 20px;"> &lt;!&ndash; 替换为实际的搜索图标路径 &ndash;&gt;-->
    <!--        <input type="text" placeholder="Search...">-->
    <!--    </div>-->
</div>

<div class="quick-links" id="quickLinks">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</div>

<div class="box">
    <div class="imglist">
        <a href="#" class="show"><img src="static/picture/img1.jpg" alt=""></a>
        <a href="#"><img src="static/picture/img2.jpg" alt=""></a>
        <a href="#"><img src="static/picture/img3.jpg" alt=""></a>
    </div>
    <div class="leftBtn">&lt;</div>
    <div class="rightBtn">&gt;</div>
    <div class="btnlist">
        <span class="che"></span>
        <span></span>
        <span></span>
    </div>
</div>


<!-- Preloader -->
<div id="preloader">
    <div class="sk-three-bounce">
        <div class="sk-child sk-bounce1"></div>
        <div class="sk-child sk-bounce2"></div>
        <div class="sk-child sk-bounce3"></div>
    </div>
</div>

<!-- Main wrapper -->
<div id="main-wrapper">



    <div class="content-body">
        <!-- row -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-3 col-xxl-3 col-sm-6">
                    <div class="widget-stat card bg-primary hover-box link-item">
                        <div class="card-body">
                            <div class="media">
                <span class="mr-3">
                    <i class="la la-users"></i>
                </span>
                                <div class="media-body text-white">
                                    <p class="mb-1">Admin Login</p>
                                    <h3 class="text-white">管理员登录 </h3>
<%--                                    <a href="horizontalTopic.jsp" class="text-decoration-none">--%>
                                    <div class="progress mb-2 bg-white">
                                        <div class="progress-bar progress-animated bg-light" style="width: 80%"></div>
                                    </div>
                                    <small>20天内增加80%</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-xxl-3 col-sm-6">
                    <div class="widget-stat card bg-warning hover-box link-item">
                        <div class="card-body">
                            <div class="media">
                <span class="mr-3">
                    <i class="la la-user"></i>
                </span>
                                <div class="media-body text-white">
                                    <p class="mb-1">Teacher Login</p>
                                    <h3 class="text-white">教师登录</h3>
                                    <div class="progress mb-2 bg-white">
                                        <div class="progress-bar progress-animated bg-light" style="width: 50%"></div>
                                    </div>
                                    <small>20天内增加50%</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-xxl-3 col-sm-6">
                    <div class="widget-stat card bg-secondary hover-box link-item">
                        <div class="card-body">
                            <div class="media">
                <span class="mr-3">
                    <i class="la la-graduation-cap"></i>
                </span>
                                <div class="media-body text-white">
                                    <p class="mb-1">Student Login</p>
                                    <h3 class="text-white">学生登录</h3>
                                    <div class="progress mb-2 bg-white">
                                        <div class="progress-bar progress-animated bg-light" style="width: 76%"></div>
                                    </div>
                                    <small>20天内增加76%</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-xxl-3 col-sm-6">
                    <div class="widget-stat card bg-danger hover-box link-item">
                        <div class="card-body">
                            <div class="media">
                <span class="mr-3">
                    <i class="la la-dollar"></i>
                </span>
                                <div class="media-body text-white">
                                    <p class="mb-1">Data Center</p>
                                    <h3 class="text-white">数据中心</h3>
                                    <div class="progress mb-2 bg-white">
                                        <div class="progress-bar progress-animated bg-light" style="width: 30%"></div>
                                    </div>
                                    <small>20天内增加30%</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <!--                <div class="col-xl-6 col-xxl-6 col-lg-12 col-sm-12">-->
                <!--                    <div class="card">-->
                <!--                        <div class="card-header">-->
                <!--                            <h3 class="card-title">University Survey</h3>-->
                <!--                        </div>-->
                <!--                        <div class="card-body">-->
                <!--                            <div id="morris_bar_stalked" class="morris_chart_height" style="height: 300px !important;"></div>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                </div>-->
                <!--                <div class="col-xl-3 col-xxl-3 col-sm-6">-->
                <!--                    <div class="card">-->
                <!--                        <div class="card-header">-->
                <!--                            <h3 class="card-title">Donught Chart</h3>-->
                <!--                        </div>-->
                <!--                        <div class="card-body">-->
                <!--                            <div id="morris_donught_2" class="morris_chart_height" style="height: 300px !important;"></div>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                </div>-->
                <!--                <div class="col-xl-3 col-xxl-3 col-sm-6">-->
                <!--                    <div class="card">-->
                <!--                        <div class="card-header">-->
                <!--                            <h3 class="card-title">University Survey</h3>-->
                <!--                        </div>-->
                <!--                        <div class="card-body">-->
                <!--                            <div id="morris_area" class="morris_chart_height" style="height: 300px !important;"></div>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                </div>-->


                <div class="col-xl-3 col-xxl-3 col-lg-6 col-md-6">
                    <div class="card">
                        <img class="img-fluid" src="static/picture/pic11.jpg" alt="">
                        <div class="card-body">
                            <h4><a href="text1.jsp">为什么早期教育是必不可少的?</a></h4>
                            <ul class="list-group mb-3 list-group-flush">
                                <li class="list-group-item px-0 border-top-0 d-flex justify-content-between"><span class="mb-0 text-muted">April 23</span>
                                    <a href="javascript:void(0);"><i class="la la-heart-o mr-1"></i><strong>230</strong></a></li>
                                <li class="list-group-item px-0 d-flex justify-content-between">
                                    <span class="mb-0">Duration :</span><strong>12 Months</strong></li>
                                <li class="list-group-item px-0 d-flex justify-content-between">
                                    <span class="mb-0">Professor :</span><strong>Jack Ronan</strong></li>
                                <li class="list-group-item px-0 d-flex justify-content-between">
                                    <span><i class="fa fa-graduation-cap text-primary mr-2"></i>Student</span><strong>+120</strong></li>
                            </ul>
                            <a href="about-courses.html" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                </div>


                <!-- 合并第二个和第三个卡片为一个新的卡片 -->
                <div class="col-xl-6 col-xxl-6 col-lg-12 col-md-12">
                    <div class="card article-card">
                        <div class="card-header d-flex justify-content-between align-items-center custom-header-bg">
                            <h2 class="card-title custom-title">教育科技|文章推选</h2>
                            <a href="#" class="btn btn-link btn-more">更多 &gt;&gt;</a>
                        </div>
                        <div class="card-body">
                            <div class="article-list">
                                <!--                                <div class="article-item">-->
                                <!--                                    <span class="bullet">·</span>-->
                                <!--                                    <h4 class="article-title"><a href="about-courses.html" class="article-link">令人震惊的教育启示</a><span class="article-date float-right">2024-07-25</span></h4>-->
                                <!--                                </div>-->
                                <div class="article-item">
                                    <span class="bullet">·</span>
                                    <h4 class="article-title">
                                        <a href="about-courses.html" class="article-link">令人震惊的教育启示</a>
                                        <scan><a href="about-courses.html" class="article-date float-right">2024-07-25</a></scan>
                                    </h4>
                                </div>
                                <div class="article-item">
                                    <span class="bullet">·</span>
                                    <h4 class="article-title">
                                        <a href="about-courses.html" class="article-link">没人告诉你的五件事</a>
                                        <scan><a href="about-courses.html" class="article-date float-right">2024-07-25</a></scan>
                                    </h4>
                                </div>
                                <div class="article-item">
                                    <span class="bullet">·</span>
                                    <h4 class="article-title">
                                        <a href="about-courses.html" class="article-link">共建更加美好未来注入强大动力</a>
                                        <scan><a href="about-courses.html" class="article-date float-right">2024-07-25</a></scan>
                                    </h4>
                                </div>
                                <div class="article-item">
                                    <span class="bullet">·</span>
                                    <h4 class="article-title">
                                        <a href="about-courses.html" class="article-link">“一带一路”建设惠及发展中国家经济发展和民生福祉</a>
                                        <scan><a href="about-courses.html" class="article-date float-right">2024-07-25</a></scan>
                                    </h4>
                                </div>
                                <div class="article-item">
                                    <span class="bullet">·</span>
                                    <h4 class="article-title">
                                        <a href="about-courses.html" class="article-link">新闻发言人吴谦就美国新一轮对台售武答记者问</a>
                                        <scan><a href="about-courses.html" class="article-date float-right">2024-07-25</a></scan>
                                    </h4>
                                </div>
                                <div class="article-item">
                                    <span class="bullet">·</span>
                                    <h4 class="article-title">
                                        <a href="about-courses.html" class="article-link">以任何名义任何理由“过境”美国</a>
                                        <scan><a href="about-courses.html" class="article-date float-right">2024-07-25</a></scan>
                                    </h4>
                                </div>
                                <div class="article-item">
                                    <span class="bullet">·</span>
                                    <h4 class="article-title">
                                        <a href="about-courses.html" class="article-link">发号施令接缝处杜甫路</a>
                                        <scan><a href="about-courses.html" class="article-date float-right">2024-07-25</a></scan>
                                    </h4>
                                </div>
                                <!--                                <div class="article-item">-->
                                <!--                                    <span class="bullet">·</span>-->
                                <!--                                    <h4 class="article-title"><a href="about-courses.html" class="article-link">没人告诉你的五件事</a><span class="article-date float-right">2024-06-19</span></h4>-->
                                <!--                                </div>-->
                                <!--                                <div class="article-item">-->
                                <!--                                    <span class="bullet">·</span>-->
                                <!--                                    <h4 class="article-title"><a href="about-courses.html" class="article-link">共建更加美好未来注入强大动力</a><span class="article-date float-right">2024-06-10</span></h4>-->
                                <!--                                </div>-->
                                <!--                                <div class="article-item">-->
                                <!--                                    <span class="bullet">·</span>-->
                                <!--                                    <h4 class="article-title"><a href="about-courses.html" class="article-link">“一带一路”建设惠及发展中国家经济发展和民生福祉</a><span class="article-date float-right">2024-06-10</span></h4>-->
                                <!--                                </div>-->
                                <!--                                <div class="article-item">-->
                                <!--                                    <span class="bullet">·</span>-->
                                <!--                                    <h4 class="article-title"><a href="about-courses.html" class="article-link">新闻发言人吴谦就美国新一轮对台售武答记者问</a><span class="article-date float-right">2024-06-10</span></h4>-->
                                <!--                                </div>-->
                                <!--                                <div class="article-item">-->
                                <!--                                    <span class="bullet">·</span>-->
                                <!--                                    <h4 class="article-title"><a href="about-courses.html" class="article-link">以任何名义任何理由“过境”美国</a><span class="article-date float-right">2024-06-10</span></h4>-->
                                <!--                                </div>-->
                                <!--                                <div class="article-item">-->
                                <!--                                    <span class="bullet">·</span>-->
                                <!--                                    <h4 class="article-title"><a href="about-courses.html" class="article-link">发号施令接缝处杜甫路</a><span class="article-date float-right">2024-06-10</span></h4>-->
                                <!--                                </div>-->
                                <!-- 可以添加更多文章项，但当前布局仅显示前七条 -->
                            </div>
                        </div>
                    </div>
                </div>


                <div class="col-xl-3 col-xxl-3 col-lg-6 col-md-6">
                    <div class="card">
                        <img class="img-fluid" src="static/picture/pic4.jpg" alt="">
                        <div class="card-body">
                            <h4><a href="about-courses.html">学习Python-交互式Python教程</a></h4>
                            <ul class="list-group mb-3 list-group-flush">
                                <li class="list-group-item px-0 border-top-0 d-flex justify-content-between"><span class="mb-0 text-muted">April 23</span>
                                    <a href="javascript:void(0);"><i class="la la-heart-o mr-1"></i><strong>230</strong></a></li>
                                <li class="list-group-item px-0 d-flex justify-content-between">
                                    <span class="mb-0">Duration :</span><strong>12 Months</strong></li>
                                <li class="list-group-item px-0 d-flex justify-content-between">
                                    <span class="mb-0">Professor :</span><strong>Nashid Martines</strong></li>
                                <li class="list-group-item px-0 d-flex justify-content-between">
                                    <span><i class="fa fa-graduation-cap text-primary mr-2"></i>Student</span><strong>+120</strong></li>
                            </ul>
                            <a href="about-courses.html" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                </div>

                <div class="col-xl-6 col-xxl-6 col-lg-6 col-md-12 col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <form action="#" method="post">
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">To</span>
                                        </div>
                                        <input type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">Subject</span>
                                        </div>
                                        <input type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="summernote"></div>
                                </div>
                                <div class="row align-items-center">
                                    <div class="col-lg-6">
                                        <div class="fallback w-100">
                                            <input type="file" class="dropify" data-default-file="">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <button type="button" class="btn btn-primary float-right">
                                            Send <i class="fa fa-paper-plane-o"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 col-xxl-6 col-lg-6 col-md-12 col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Exam Toppers</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table verticle-middle">
                                    <thead>
                                    <tr>
                                        <th scope="col">Roll No.</th>
                                        <th scope="col">Name</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Edit</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>542</td>
                                        <td>Jack Ronan</td>
                                        <td><span id="widget_sparklinedash"><canvas></canvas></span></td>
                                        <td>
                                            <a href="javascript:void(0);" class="btn btn-sm btn-primary"><i class="la la-pencil"></i></a>
                                            <a href="javascript:void(0);" class="btn btn-sm btn-danger"><i class="la la-trash-o"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>243 </td>
                                        <td>Jimmy Morris</td>
                                        <td>
                                            <div class="ico-sparkline">
                                                <div id="widget_spark-bar"></div>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="javascript:void(0);" class="btn btn-sm btn-primary"><i class="la la-pencil"></i></a>
                                            <a href="javascript:void(0);" class="btn btn-sm btn-danger"><i class="la la-trash-o"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>452 </td>
                                        <td>Nashid Martines</td>
                                        <td>
                                            <div class="ico-sparkline">
                                                <div id="widget_StackedBarChart"></div>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="javascript:void(0);" class="btn btn-sm btn-primary"><i class="la la-pencil"></i></a>
                                            <a href="javascript:void(0);" class="btn btn-sm btn-danger"><i class="la la-trash-o"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>124</td>
                                        <td>Roman Aurora</td>
                                        <td>
                                            <div class="ico-sparkline">
                                                <div id="widget_tristate"></div>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="javascript:void(0);" class="btn btn-sm btn-primary"><i class="la la-pencil"></i></a>
                                            <a href="javascript:void(0);" class="btn btn-sm btn-danger"><i class="la la-trash-o"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>234</td>
                                        <td>Samantha</td>
                                        <td>
                                            <div class="ico-sparkline">
                                                <div id="widget_composite-bar"></div>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="javascript:void(0);" class="btn btn-sm btn-primary"><i class="la la-pencil"></i></a>
                                            <a href="javascript:void(0);" class="btn btn-sm btn-danger"><i class="la la-trash-o"></i></a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12 col-xxl-12 col-lg-12 col-md-12 col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">New Student List</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive recentOrderTable">
                                <table class="table verticle-middle table-responsive-md">
                                    <thead>
                                    <tr>
                                        <th scope="col">No.</th>
                                        <th scope="col">Name</th>
                                        <th scope="col">Assigned Professor</th>
                                        <th scope="col">Date Of Admit</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Subject</th>
                                        <th scope="col">Fees</th>
                                        <th scope="col">Edit</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>01</td>
                                        <td>Jack Ronan</td>
                                        <td>Airi Satou</td>
                                        <td>01 August 2020</td>
                                        <td><span class="badge badge-rounded badge-primary">Checkin</span></td>
                                        <td>Commerce</td>
                                        <td>120$</td>
                                        <td>
                                            <a href="edit-student.html" class="btn btn-sm btn-primary"><i class="la la-pencil"></i></a>
                                            <a href="javascript:void(0);" class="btn btn-sm btn-danger"><i class="la la-trash-o"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>02 </td>
                                        <td>Jimmy Morris</td>
                                        <td>Angelica Ramos</td>
                                        <td>31 July 2020</td>
                                        <td><span class="badge badge-rounded badge-warning">Panding</span></td>
                                        <td>Mechanical</td>
                                        <td>120$</td>
                                        <td>
                                            <a href="edit-student.html" class="btn btn-sm btn-primary"><i class="la la-pencil"></i></a>
                                            <a href="javascript:void(0);" class="btn btn-sm btn-danger"><i class="la la-trash-o"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>03 </td>
                                        <td>Nashid Martines</td>
                                        <td>Ashton Cox</td>
                                        <td>30 July 2020</td>
                                        <td><span class="badge badge-rounded badge-danger">Canceled</span></td>
                                        <td>Science</td>
                                        <td>520$</td>
                                        <td>
                                            <a href="edit-student.html" class="btn btn-sm btn-primary"><i class="la la-pencil"></i></a>
                                            <a href="javascript:void(0);" class="btn btn-sm btn-danger"><i class="la la-trash-o"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>04</td>
                                        <td>Roman Aurora</td>
                                        <td>Cara Stevens</td>
                                        <td>29 July 2020</td>
                                        <td><span class="badge badge-rounded badge-success">Checkin</span></td>
                                        <td>Arts</td>
                                        <td>220$</td>
                                        <td>
                                            <a href="edit-student.html" class="btn btn-sm btn-primary"><i class="la la-pencil"></i></a>
                                            <a href="javascript:void(0);" class="btn btn-sm btn-danger"><i class="la la-trash-o"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>05</td>
                                        <td>Samantha</td>
                                        <td>Bruno Nash </td>
                                        <td>28 July 2020</td>
                                        <td><span class="badge badge-rounded badge-success">Checkin</span></td>
                                        <td>Maths</td>
                                        <td>130$</td>
                                        <td>
                                            <a href="edit-student.html" class="btn btn-sm btn-primary"><i class="la la-pencil"></i></a>
                                            <a href="javascript:void(0);" class="btn btn-sm btn-danger"><i class="la la-trash-o"></i></a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!--**********************************
        Content body end
    ***********************************-->


    <!--**********************************
        Footer start
    ***********************************-->
    <div class="footer">
        <div class="copyright">
            <p>Copyright © Designed &amp; Developed by 2020</p>
        </div>
    </div>


    <!--</div>-->
</div>

<script src="static/js/global.min.js"></script>
<script src="static/js/bootstrap-select.min.js"></script>
<script src="static/js/custom.min.js"></script>
<script src="static/js/dlabnav-init.js"></script>

<!-- Chart sparkline plugin files -->
<script src="static/js/jquery.sparkline.min.js"></script>
<script src="static/js/sparkline-init.js"></script>

<!-- Chart Morris plugin files -->
<script src="static/js/raphael.min.js"></script>
<script src="static/js/morris.min.js"></script>

<!-- Init file -->
<script src="static/js/widgets-script-init.js"></script>

<!-- Demo scripts -->
<script src="static/js/dashboard.js"></script>

<!-- Summernote -->
<script src="static/js/summernote.min.js"></script>
<!-- Summernote init -->
<script src="static/js/summernote-init.js"></script>

<!-- Svganimation scripts -->
<script src="static/js/vivus.min.js"></script>
<script src="static/js/svg.animation.js"></script>
<script src="static/js/styleSwitcher.js"></script>
<script src="static/js/lunbotu.js"></script>
<script src="static/js/logo.refresh.js"></script>
<script src="static/js/hyperlink.js"></script>
<style>
    :root {
        --background-image: none; /* 初始值设为无背景 */
        --background-opacity: 1;  /* 初始透明度为1（不透明） */
    }

    body {
        transition: background-color 0.3s ease, --background-opacity 0.3s ease;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-image: var(--background-image);
        background-color: rgba(255, 255, 255, var(--background-opacity)); /* 使用透明度作为背景颜色 */
    }

    body.has-background {
        /* 这里不需要额外设置背景属性，因为它们在body选择器中已经定义了 */
    }


    /*保留之前的 CSS 样式不变，只需确保 article-card 及其子元素的样式正确应用*/
    .article-card {
        /*border: 0; !* 移除边框，如果需要的话 *!*/
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
        transition: box-shadow 0.3s ease;
        background-color: #9da1a4; /* 使用半透明灰蓝色，以保留阴影效果 */
    }

    .article-card:hover {
        background-color: #9da1a4; /* 更改背景颜色为浅灰色 #9da1a4*/
        box-shadow: 0 8px 16px rgb(255, 255, 255); /* 鼠标悬停时增加阴影 */
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* 为card-header添加自定义背景颜色 */
    .custom-header-bg {
        background-color: #e1eaeb; /* e1eaeb */
        padding: 15px 20px; /* 可选：为header添加内边距，以便更好地展示背景色 */
        border-radius: 8px 8px 0 0; /* 可选：为header添加圆角，与卡片底部形成对比 */
        color: white; /* 设置文本颜色为白色，以确保在深色背景上可读 */
    }

    /* 如果需要，也可以为card-title设置一些样式 */
    .custom-header-bg .card-title {
        font-size: 24px; /* 可选：设置字体大小 */
        font-weight: bold; /* 可选：加粗字体 */
    }

    .article-list {
        list-style: none;
        padding: 0;
    }

    .article-item {
        display: flex;
        align-items: center;
        padding: 15px 0;
        border-bottom: 1px solid #eee; /* 分隔线 */
    }

    /* 为card-title添加自定义样式 */
    .custom-title {
        font-size: 24px; /* 设置字体大小 */
        color: #3498db; /* 设置字体颜色为酷炫的蓝色 */
        font-weight: bold; /* 加粗字体 */
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* 添加文本阴影，增加立体感 */
        background: linear-gradient(to right, #ff7e5f, #feb47b); /* 应用渐变背景色，使其更加酷炫 */
        -webkit-background-clip: text; /* 将背景色应用于文本 */
        -webkit-text-fill-color: transparent; /* 使文本颜色透明，以显示背景色 */
        padding: 0 10px; /* 可选：为文本添加一些内边距，以便更好地显示渐变效果 */
    }

    .article-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%; /* 确保标题占据整行 */

        position: relative; /* 为后续的对齐调整提供定位上下文 */
    }

    /*.article-title a.article-link {*/
    /*    flex-grow: 0.6666; !* 占据约2/3的宽度 *!*/
    /*    white-space: nowrap;*/
    /*    overflow: hidden;*/
    /*    text-overflow: ellipsis;*/
    /*    position: relative;*/
    /*}*/

    .article-title a {
        flex-grow: 1; /* 使链接占据除日期外的剩余空间 */

        position: relative; /* 为下划线定位 */
        /*padding-bottom: 4px; !* 与.article-date的padding-bottom保持一致，确保下划线对齐 *!*/
    }

    .article-date {
        /* 移除之前的浮动和间距设置 */
        margin-left: auto; /* 自动右边距，使日期靠右对齐 */
        color: #6c757d; /* 日期颜色 */
        font-size: 0.875rem; /* 日期字体大小 */
        position: relative; /* 为下划线定位 */

        padding-bottom: 5px; /*2 为下划线留出空间 */
        display: inline-block; /* 确保伪元素只影响日期文本 */
    }

    .article-title a::after,
    .article-date::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -5px; /* -5px */
        width: 0;
        height: 2px;
        background-color: #d14c67; /* 下划线颜色，您可以根据需要调整 */
        transition: width 0.3s ease; /* 平滑过渡效果 */
    }

    .article-item:hover .article-title a::after,
    .article-item:hover .article-date::after {
        width: 100%; /* 鼠标悬停时下划线扩展到文字末尾 */
    }

    /*.article-item:last-child {*/
    /*    border-bottom: 0; !* 移除最后一个项目的分隔线 *!*/
    /*}*/

    .bullet {
        color: white; /* 红色点 */
        font-size: 2.0rem; /* 增大红点大小 */
        margin-right: 10px; /* 点与文章标题之间的间距 */
    }

    .article-link {
        color: #333; /* 初始链接颜色 */
        text-decoration: none; /* 移除下划线 */
        position: relative; /* 为下划线定位 */
        display: inline-block; /* 确保伪元素只影响链接文本 */
        transition: color 0.3s ease, text-decoration 0.3s ease; /* 平滑过渡效果 */
    }

    .article-link:hover,
    .article-item:hover .article-date {
        color: #007bff; /* 鼠标悬停时链接和日期变色 */
        text-decoration: underline; /* 鼠标悬停时显示下划线（虽然这里不需要，因为我们有自定义下划线） */
    }

    .article-link::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -4px; /* 调整下划线与文字的距离 */
        width: 0;
        height: 2px;
        background-color: #d14c67; /* 下划线颜色 */
        transition: width 0.3s ease; /* 平滑过渡效果 */
    }

    .article-link:hover::after {
        width: 100%; /* 鼠标悬停时下划线扩展到文字末尾 */
    }

    /*.article-date {*/
    /*    color: #6c757d; !* 日期颜色 *!*/
    /*    font-size: 0.875rem; !* 日期字体大小 *!*/
    /*    margin-left: 15px; !* 日期与文章标题之间的间距 *!*/
    /*}*/

    .btn-more {
        color: #007bff; /* 链接颜色 */
        text-decoration: none; /* 移除下划线 */
        transition: color 0.3s ease; /* 平滑过渡效果 */
    }

    .btn-more:hover {
        color: #0056b3; /* 鼠标悬停时链接变色 */
        text-decoration: underline; /* 鼠标悬停时显示下划线 */
    }
</style>

</body>


</html>
